<template>
  <div>
    <img src="/src/assets/error-2.png" class="errors">
    <div class="card-forum">
      <div class="card-column" v-for="(v, k) in columns" :key="k">
        <div class="column" v-for="(x, i) in v" :key="x.title">
          <div class="title">{{x.title}}</div>
          <div class="desc">{{x.desc}}</div>
          <img :src="x.icon" class="icon">
        </div>
      </div>
      <swipe :swipe-image="image" class="swipe"></swipe>
      <div class="line"></div>
      <div class="article-list">
        <div class="item" v-for="(v, k) in articleList" :key="k">
          <div class="article">
            <div class="title">{{v.title}}</div>
            <div class="icons">
              <img src="/src/assets/icons/eye.png">
              <span>{{v.read}}</span>
              <img src="/src/assets/icons/heart-gray.png">
              <span>{{v.heart}}</span>
            </div>
          </div>
          <img class="image" :src="v.image" alt="文章图片">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import swipe from '@/components/swipe'

  export default {
    name: 'Phone',
    components: {
      swipe
    },
    data () {
      return {
        image: [
          'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg',
          'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'
        ],
        columns: [[
          {title: '银行卡片', desc: '此处为简介简介简介', icon: '/src/assets/icons/card.png'},
          {title: '航空里程', desc: '此处为简介简介简介', icon: '/src/assets/icons/plane-purple.png'}
        ],
        [
          {title: '酒店集团', desc: '此处为简介简介简介', icon: '/src/assets/icons/house.png'},
          {title: '个人故事', desc: '此处为简介简介简介', icon: '/src/assets/icons/person.png'}
        ]],
        articleList: [
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'},
          {title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题', read: 100, heart: 200, image: 'http://www.bettercard.cn/uploads/2017/11/15/1bbdd55e399d07f1dcc3dc5858633b3b.jpg'}
        ]
      }
    },
    methods: {
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-white: #FFFFFF;
  @bc-235: rgb(235, 235, 235);
  @full-width: 100vw;
  .line {
    height: 8px;
    background-color: rgb(240, 244, 247);
  }
  .errors {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
  }
  .flex {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
  }
  .card-forum {
    width: @full-width;
    height: 100vh;
    text-align: left;
    background-color: #FFF;
    overflow: hidden;
    .card-column {
      width: @full-width;
      padding: 8px 0;
      border-bottom: 1px solid @bc-235;
      .flex;
      &:last-child {
        border-bottom: 0;
      }
      .column { // 栏目
        padding: 0 12px;
        flex: 1;
        border-right: 1px solid @bc-235;
        position: relative;
        .title {
          display: block;
          color: @c-124;
          font-size: 13px;
          line-height: 24px;
          font-weight: bold;
          margin-bottom: 4px;
        }
        .desc {
          display: block;
          color: @c-169;
          font-size: 12px;
          line-height: 20px;
        }
        .icon {
          width: 24px;
          height: 24px;
          position: absolute;
          right: 12px;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }
    }
    /* 轮播图 */
    .swipe {
      height: 88px;
      padding: 12px;
    }
    /* 文章列表 */
    .article-list {
      padding-left: 12px;
      .item {
        &:extend(.flex);
        border-bottom: 1px solid @bc-235;
        padding: 12px 12px 12px 0;
        .article {
          flex: 1;
          .title {
            &:extend(.card-forum .card-column .column .title);
            margin-bottom: 8px;
          }
          .icons {
            font-size: 0;
            img {
              width: 24px;
              height: 24px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 8px;
              &:first-child {
                margin-left: 0;
              }
            }
            span {
              &:extend(.card-forum .card-column .column .desc);
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
        .image {
          margin-left: 12px;
          flex: 0;
          width: 96px;
          height: 80px;
          border-radius: 8px;
        }
      }
    }
  }
</style>